<script setup>
import {
  UserOutlined,
  DownOutlined,
  DashboardOutlined,
  CloudServerOutlined,
  UserAddOutlined,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { computed, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { getLoginUser, userLogout } from "@/api/user";
import { userRoleList } from "@/utils/user-role";

const route = useRoute();
const router = useRouter();
const store = useStore();

const loginUser = computed(() => store.state.loginUser);

const selectedKeys = computed({
  get: () => [route.name],
  set: (item) => {
    router.push({ name: item[0] });
  },
});

const handleLogout = async () => {
  let { data } = await userLogout();
  message.info(data.message);
  router.push({ name: "Login" });
};

onMounted(async () => {
  let { data: user } = await getLoginUser();
  store.commit("updateUser", user.data);
});
</script>

<template>
  <a-layout>
    <a-layout-sider :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }">
      <div class="logo">
        <img src="../../assets/logo.png" />
        Server List
      </div>
      <a-menu theme="dark" mode="inline" v-model:selectedKeys="selectedKeys">
        <a-menu-item key="AdminIndex">
          <dashboard-outlined />
          <span class="nav-text">仪表盘</span>
        </a-menu-item>
        <a-sub-menu key="server-manager">
          <template #icon>
            <cloud-server-outlined />
          </template>
          <template #title>服务器管理</template>
          <a-menu-item key="ServerList">服务器列表</a-menu-item>
          <a-menu-item key="ServerAll">所有服务器</a-menu-item>
          <a-menu-item key="ServerAdd">添加服务器</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="user-manager" v-if="loginUser.userRole >= 3">
          <template #icon>
            <user-add-outlined />
          </template>
          <template #title>用户管理</template>
          <a-menu-item key="UserList">用户列表</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout :style="{ marginLeft: '200px' }">
      <a-layout-header class="header">
        <div style="width: 100%; flex-shrink: 1"></div>
        <a-button style="margin-right: 16px" size="small" @click="message.error('开发中')">文档</a-button>
        <a-dropdown placement="bottomRight">
          <template #overlay>
            <a-menu>
              <a-menu-item @click="router.push({ name: 'UserInfo' })"> 个人中心 </a-menu-item>
              <a-menu-divider />
              <a-menu-item @click="handleLogout"> 退出 </a-menu-item>
            </a-menu>
          </template>
          <a-button size="small">
            <user-outlined />
            {{ loginUser.email }}
            ( {{ userRoleList[loginUser.userRole] }} )
            <down-outlined />
          </a-button>
        </a-dropdown>
      </a-layout-header>
      <router-view />
      <a-layout-footer :style="{ textAlign: 'center' }"> Ant Design ©2018 Created by Ant UED </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<style scoped>
.logo {
  height: 64px;
  background: #002140;
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo img {
  width: 30px;
  margin-right: 8px;
}

.header {
  background: #fff;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  padding: 0 24px;
}

.header > * {
  flex-shrink: 0;
}
</style>
